<!--
 * @FilePath     : /study_code/html/input-type-file-complicated_use.html
 * @Description  : 文件上传实际使用
 * @Date         : 2025-04-26 08:40:19
 * @Author       : Fang YingGui
 * @LastEditors  : fangyinggui 18715384437@163.com
 * @LastEditTime : 2025-04-26 08:40:22
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>documentName</title>
  </head>

  <body>
    <form method="post" enctype="multipart/form-data">
      <div>
        <label for="image_uploads">Choose images to upload (PNG, JPG)</label>
        <input
          type="file"
          id="image_uploads"
          name="image_uploads"
          accept=".jpg, .jpeg, .png"
          multiple
        />
      </div>
      <div class="preview">
        <p>No files currently selected for upload</p>
      </div>
      <div>
        <button>Submit</button>
      </div>
    </form>

    <script>
      // 隐藏 Input
      const input = document.querySelector('input')
      const preview = document.querySelector('.preview')

      input.style.opacity = 0

      // 监听 change 事件
      input.addEventListener('change', updateImageDisplay)

      function updateImageDisplay() {
        // 清空预览区
        while (preview.firstChild) {
          preview.removeChild(preview.firstChild)
        }

        // 已选文件信息对象
        const curFiles = input.files
        if (curFiles.length === 0) {
          // 未选中文件
          const para = document.createElement('p')
          para.textContent = 'No files currently selected for upload'
          preview.appendChild(para)
        } else {
          // 选中文件
          const list = document.createElement('ol')
          preview.appendChild(list)

          for (const file of curFiles) {
            const listItem = document.createElement('li')
            const para = document.createElement('p')
            if (validFileType(file)) {
              // 输出文件信息
              para.textContent = `File name ${file.name}, file size ${returnFileSize(file.size)}.`
              // 预览图片
              const image = document.createElement('img')
              image.src = URL.createObjectURL(file)

              listItem.appendChild(image)
              listItem.appendChild(para)
            } else {
              para.textContent = `File name ${file.name}: Not a valid file type. Update your selection.`
              listItem.appendChild(para)
            }

            list.appendChild(listItem)
          }
        }
      }

      // #辅助：校验文件类型
      // https://developer.mozilla.org/zh-CN/docs/Web/Media/Formats/Image_types
      const fileTypes = [
        'image/apng',
        'image/bmp',
        'image/gif',
        'image/jpeg',
        'image/pjpeg',
        'image/png',
        'image/svg+xml',
        'image/tiff',
        'image/webp',
        'image/x-icon',
      ]

      function validFileType(file) {
        return fileTypes.includes(file.type)
      }

      // # 转换文件显示和大小
      function returnFileSize(number) {
        if (number < 1024) {
          return `${number} bytes`
        } else if (number >= 1024 && number < 1048576) {
          return `${(number / 1024).toFixed(1)} KB`
        } else if (number >= 1048576) {
          return `${(number / 1048576).toFixed(1)} MB`
        }
      }
    </script>
  </body>
</html>
